import React from 'react';
import {connect} from 'react-redux';
import {Redirect} from 'react-router-dom';
import {NavBar,Icon,WhiteSpace,List,Button, InputItem,Picker,TextareaItem} from 'antd-mobile';

import AvatarChoose from '../../component/avatarChoose/avatarChoose';

import {saveInfo} from '../../redux/registerRedux';

// 行业选择select数据
const district1 = [
    {
        label:'互联网',
        value:11
    },
    {
        label:'服务业',
        value:12
    },
    {
        label:'传统行业',
        value:13
    },
    {
        label:'煤矿业',
        value:14
    }
];
class GeniusInfo extends React.Component {
    constructor() {
        super();
        this.state = {
            type:'genius',
            avatarText:'',//选择头像的名称
            pickerValue: [],//行业选中项的value值
            joinPosition:'',//应聘职位
            money:'',//薪资
            desc:''//个人描述
        };
    };
    render() {
        // console.log(this.state);
        // console.log(this.props.redirect,this.props.location.pathname);
        return (
            <div>
                {this.props.redirect&&this.props.redirect !== this.props.location.pathname?<Redirect to={this.props.redirect} />:null}
                <NavBar
                    mode="dark"
                    leftContent="Back"
                    rightContent={[
                        <Icon key="1" type="ellipsis" />
                    ]}
                >
                    牛人完善信息
                </NavBar>
                <WhiteSpace/>
                <AvatarChoose avatarText={this.state.avatarText} avatarChooseName={this.avatarChooseName}></AvatarChoose>
                <WhiteSpace/>
                {this.props.msg?<p style={{color:'red'}}>{this.props.msg}</p>:null}
                <List>
                    <Picker 
                        data={district1} 
                        cols={1} 
                        className="forss"
                        onOk={v => this.selectChange(v)}
                        extra="请选择行业"
                        value={this.state.pickerValue}
                    >
                        <List.Item arrow="horizontal">选择行业</List.Item>
                    </Picker>
                </List>
                <List>
                    <InputItem value={this.state.joinPosition} placeholder="请输入应聘职位" onChange={(e) => this.onChange('joinPosition',e)} >应聘职位</InputItem>
                </List>
                <List>
                    <InputItem value={this.state.money} placeholder="请输入薪资要求" onChange={(e) => this.onChange('money',e)} >薪资要求</InputItem>
                </List>
                <List>
                    <TextareaItem
                        title="自我介绍"
                        editable={false}
                        labelNumber={5}
                    />
                    <TextareaItem
                        rows={3}
                        placeholder="请简单介绍一下自己..."
                        count={177}
                        onChange={(e) => this.onChange('desc',e)}
                        value={this.state.desc}
                    />
                </List>
                <WhiteSpace/>
                <List>
                    <Button type="primary" onClick={this.saveInfo}>保存</Button>
                </List>
            </div>
        )
    }
    // 行业选择下拉框选中事件
    selectChange = (val) => {
        this.setState({
            pickerValue:val
        })
    };
    // 输入框change事件
    onChange = (text,val) => {
        // console.log(text,val);
        this.setState({
            [text]:val
        })
    };
    // 头像选择事件
    avatarChooseName = (val) => {
        // console.log(val);
        this.setState({
            avatarText:val.text
        })
    };
    // 保存功能
    saveInfo = () => {
        this.props.saveInfo(this.state);
    }
}
const mapStateToProps = (state) => {
    return {
        msg:state.registerReducer.msg,
        redirect:state.registerReducer.redirectTo
    }
}
const mapDispatchToProps = {saveInfo};
export default connect(mapStateToProps,mapDispatchToProps)(GeniusInfo);